<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>图形</title>
    <script type="text/javascript">
      //开始时间作为参数导入，结束时间根据实际时长进行显示
      Ext.chart.Chart.CHART_URL = 'javascripts/extjs/resources/charts.swf';
      var chartStore;

      Ext.onReady(function(){
        var trainTaskId = <%=params[:trainTaskId]%>                             //从前面的链接得到id的值
        var taskBeginMinute = <%=params[:taskBeginMinute]%>                     //因为第一次是显示精准列表，先赋值任务起始时间
        var isEnd = '<%=params[:isEnd]%>'


        var trainTaskTemplate = new Ext.XTemplate('<tpl for="."><div class="search-item">', '{train_name} - {sn}', '</div></tpl>');
        var trainTaskDS = new Ext.data.Store({
          proxy:new Ext.data.HttpProxy({url:'/traintask/getActiveTasks'}),
          autoLoad:true,
          reader:new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
          }, [
            {name:'sn'},                                                        //用作后面的displayField:
            {name:'id'},                                                        //用作后面的valueField:
            {name:'begin_time'},
            {
              name:'train_name',
              mapping:'train',
              convert:function(value){
                return value.sn
              }
            },
            {name:'arrive_train_number'},
            {name:'leave_train_number'},
            {name:'stop_track'}
          ])
        });
        var trainTaskCombo = new Ext.form.ComboBox({                          //配合上面的departmentDS，完成动态生成的下拉框
          store: trainTaskDS,
          hiddenName:'trainTaskId',                                             //显示时：这里写后台传送过来的字段，一旦和valueField相等，就进行显示。不相等为空。
          displayField:'sn',                                                    //store里面的值，用于显示在表面上的值
          valueField:'id',                                                      //store里面的值，和display联动
          typeAhead: true,
          minChars:1,
          readOnly:false,
          mode: 'remote',
          fieldLabel:'维修任务',
          forceSelection: true,
          tpl: trainTaskTemplate,                                               //加入上面的模板
          itemSelector: 'div.search-item',                                      //对Css进行选择，如果没有这一句，则选择不上了
          triggerAction: 'all',
          emptyText:'请选择维修任务.....',
          selectOnFocus:true,
          listeners:{
            select : function(combo, record, index){
              trainTaskId = combo.value
              var taskBeginTime = record.get('begin_time')                    //获取开始时间
              var day = 2                                                       //把开始时间转化为分钟
              var hour = taskBeginTime.slice(11,13)
              var minute = taskBeginTime.slice(14,16)
              taskBeginMinute = day*1440 + hour*60 + minute*1
              while (taskBeginMinute> 1920)
              {
                taskBeginMinute = taskBeginMinute-1440
              }
              //把trainTaskId作为参数传给store
              chartStore.setBaseParam('trainTaskId',trainTaskId)
              readChartWin.setTitle(record.get('sn')+"的工作进度表");
              trainNameText.setValue(record.get('train_name'))
              arriveTrainNumberText.setValue(record.get('arrive_train_number'))
              leaveTrainNumberText.setValue(record.get('leave_train_number'))
              stopTrackText.setValue(record.get('stop_track'))
              chartStore.load()
            }
          }
        });

        var powerDownButton = new Ext.Button({
          text:'断电',
          width:50,
          iconCls:'chart',
          handler:function(){
            Ext.MessageBox.confirm('提示','确定断电进入静态作业？',function (button){
              if(button=='yes'){
                Ext.Ajax.request({
                  url:'/traintask/setTraintaskBegin?trainTaskId='+ '<%=params[:trainTaskId]%>',
                  method:'post',
                  success:function(response,opts){
                    chartStore.load();
                    powerUpButton.setDisabled(false);
                    powerDownButton.setDisabled(true)
                  }
                });
              }
            })
          }
        })

        var powerUpButton = new Ext.Button({
          text:'供电',
          width:50,
          iconCls:'chart',
          handler:function(){
            Ext.MessageBox.confirm('提示','请确认是否已断电90分钟。并且确认需要动态作业的小组，静态作业已完成，如果未完成通知相关人员打下工卡。确认供电请按“是”，取消供电请按“否”？',function (button){
              if(button=='yes'){
                Ext.Ajax.request({
                  url:'/traintask/setPowerBegin?trainTaskId='+ '<%=params[:trainTaskId]%>',
                  method:'post',
                  success:function(response,opts){
                    chartStore.load();
                    powerUpButton.setDisabled(true);
                    powerDownButton.setDisabled(true)
                  }
                });
              }
            })
          }
        })
        if(isEnd == '0'){
          powerDownButton.setDisabled(false)
          powerUpButton.setDisabled(true)
        }else if(isEnd == '2'){
          powerDownButton.setDisabled(true)
          powerUpButton.setDisabled(false)
        }else{
          powerDownButton.setDisabled(true)
          powerUpButton.setDisabled(true)
        }

        var chartCycleButton = new Ext.CycleButton({
          showText: true,
          width:100,
          items: [{
              text:'查看精准时间图',
              iconCls:'undo',
              handler:function(){
                chartStore.proxy = new Ext.data.HttpProxy({
                  url: '/maintenance/getCharts'                                     //使用精准chart图所需要的数据体
                });
                taskBeginMinute = <%=params[:taskBeginMinute]%>;                    //将起始时间设为详细的参数值，用于显示精准时间图。
                chartStore.load();
              }
            },{
              text:'查看全天时间图',
              iconCls:'maxItem',
              checked:true,
              handler:function(){
                chartStore.proxy = new Ext.data.HttpProxy({
                  url: '/maintenance/getFullCharts'                                 //使用显示全天时间所需要的数据体
                });
                taskBeginMinute = 1080;                                             //将起始时间设为1080，即18点。
                chartStore.load();
              }
            }
          ]
          ,
          changeHandler:function(btn, item){
            if (item.text == '查看精准时间图')
            {
              chartStore.proxy = new Ext.data.HttpProxy({
                url: '/maintenance/getFullCharts'                                 //使用显示全天时间所需要的数据体
              });
              taskBeginMinute = 1080;                                             //将起始时间设为1080，即18点。
              chartStore.load();
            }
            else
            {
              chartStore.proxy = new Ext.data.HttpProxy({
                url: '/maintenance/getCharts'                                     //使用精准chart图所需要的数据体
              });
              taskBeginMinute = <%=params[:taskBeginMinute]%>;                    //将起始时间设为详细的参数值，用于显示精准时间图。
              chartStore.load();
            }
          }
        });

        var screenButton = new Ext.Button({
          text: '全屏窗口',
          scope:this,
          pressed: false,
          enableToggle: true,
          iconCls: 'maxItem',
          toggleHandler:function(item,pressed){
            if(pressed){
              readChartWin.maximize();
              stackedBarChart.setWidth(readChartWin.getWidth()-35);
              screenButton.setText('普通窗口')
              screenButton.setIconClass('undo')
            }else{
              readChartWin.restore()
              stackedBarChart.setWidth(readChartWin.getWidth()-50);
              screenButton.setText('全屏窗口')
              screenButton.setIconClass('maxItem')
            }
          }
        })


        var trainNameText = new Ext.form.TextField({
          fieldLabel: '列车编号',
          disabled: true,
          id: 'train_name'
        })

        var arriveTrainNumberText = new Ext.form.TextField({
          fieldLabel: '到达车次',
          disabled: true,
          id: 'arrive_train_number'
        })

        var leaveTrainNumberText = new Ext.form.TextField({
          fieldLabel: '始发车次',
          disabled: true,
          id: 'leave_train_number'
        })

        var stopTrackText = new Ext.form.TextField({
          fieldLabel: '停放股道',
          disabled: true,
          id: 'stop_track'
        })

        chartStore = new Ext.data.Store({
          paramNames: {
            trainTaskId: "trainTaskId"
          },
          baseParams: {
            trainTaskId: trainTaskId
          },
          proxy: new Ext.data.HttpProxy({
            url: '/maintenance/getCharts'
          }),
          reader: new Ext.data.JsonReader({
            totalProperty: 'total',
            root: 'root'
          }, [
            {name: 'team_name',mapping: 'team.name'},
            {name: 'work_name',mapping: 'work.name'},
            {name: 'train_task_id'},
            {name: 'begin_minute'},                                             //开始时间，距离beginMinute的时间，以分钟计
            {name: 'un_start_minute'},                                          //计划时间，以分钟计
            {name: 'during_minute'},                                            //持续时间，以分钟计
            {name: 'finish_minute'},
            {name: 'end_minute'},
            {name: 'head_minute'},
            {name: 'foot_minute'},
            {name: 'id'},
            {name: 'begin_time'},
            {name: 'finish_time'},
            {name: 'during_time'},
            {name: 'check_in_time'},
            {name: 'check_out_time'},
            {name: 'un_start_time'},
            {name: 'description'},
            {name: 'flag'},
            {name: 'dynamic_check_in_time'},
            {name: 'dynamic_check_out_time'},
            {name: 'dynamic_during_minute'},
            {name: 'dynamic_finish_minute'},
            {name: 'dynamic_end_minute'},
            {name: 'dynamic_un_start_minute'},
            {
              name:'worker_name',
              mapping:'worker',
              convert:function(value){
                if(value){
                  return value.name
                }else{
                  return '非打卡结束'
                }
                
              }
            },
            {name: 'title'},
            {name: 'flag'}
          ])
        });

        var searchChartForm = new Ext.FormPanel({
          labelWidth: 75,
          url:'/purchase/create',
          frame:true,
          labelAlign: 'right',
          buttonAlign: 'right',
          bodyStyle:'padding:5px 5px 0',
          border:false,
          width: 903,
          reader:new Ext.data.JsonReader({
          },[
            {name:'sn'},                                                        //用作后面的displayField:
            {name:'id'},                                                        //用作后面的valueField:
            {name:'begin_time'},
            {
              name:'train_name',
              mapping:'train',
              convert:function(value){
                return value.sn
              }
            },
            {name:'arrive_train_number'},
            {name:'leave_train_number'},
            {name:'stop_track'}
          ]
        ),
          items: [{
              layout: 'column',
              border: false,
              items: [{
                  columnWidth: .30,
                  layout: 'form',
                  border: false,
                  items: [trainNameText]
                },{
                  columnWidth: .30,
                  layout: 'form',
                  border: false,
                  items: [stopTrackText]
                },{
                  columnWidth: .13,
                  layout: 'form',
                  items: [screenButton]
                },{
                  columnWidth: .13,
                  layout: 'form',
                  items: [powerDownButton]
                },{
                  columnWidth: .13,
                  layout: 'form',
                  items: [powerUpButton]
                }
              ]
            }
            ,
            {
              layout: 'column',
              border: false,
              items: [{
                  columnWidth: .30,
                  layout: 'form',
                  items: [arriveTrainNumberText]
                },{
                  columnWidth: .30,
                  layout: 'form',
                  items: [leaveTrainNumberText]
                },{
                  columnWidth: .40,
                  layout: 'form',
                  items: [trainTaskCombo]
                }
              ]
            }
          ]
        });

        var timeFormat = function(value){                                       //横轴时间的显示，value为参数值
          var hour = Math.floor((taskBeginMinute+value)/60)                    //取得小时数
          var minute = taskBeginMinute+value-hour*60                            //取得剩余分钟数
          if(taskBeginMinute+value>=1440){                                      //分钟数超过1440，即超过一天
            if(minute<10){                                                      //对比小时后，剩余分钟数小于十分钟
              return String(hour-24)+":"+"0"+String(minute);                    //结果补零
            }else{
              return String(hour-24)+":"+String(minute);                        //直接组合返回
            }
          }else{
            if(minute<10){                                                      //对比小时后，剩余分钟数小于十分钟
              return String(hour)+":"+"0"+String(minute);                       //结果补零
            }else{
              return String(hour)+":"+String(minute);                           //直接组合返回
            }
          }
        }

        var numAxis = new Ext.chart.NumericAxis({
          stackingEnabled: true,                                                //true:累加。false:并排放。
          labelRenderer: timeFormat,                                            //x轴的标签，调用下面的function
          position: 'top'                                                       //更改标题位置
        })

        var stackedBarChart = new Ext.chart.StackedBarChart({
          width: 884,
          height: 646,
          title: '工作进度表',
          store: chartStore,
          yField: 'title',                                                      //y轴显示
          extraStyle:{
            legend:{
              display:'top'                                                     //用以在图表的顶端显示图例
            }
          },
          xAxis: numAxis,                                                       //使用数字轴来进行显示
          series: [                                                             //开始编写数据构成
            {
              xField: 'begin_minute',
              displayName: ' ',                                                 //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: 'ffffffff'                                               //将第一组设为白色，与底色相同，产生透明效果（这个要写8个f，而不是传统的6个）
              }
            },{
              xField: 'un_start_minute',
              fieldLabel: 'un_start_minute',
              displayName: '计划任务',                                           //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: 'B0B2B3'                                                 //计划任务，灰色
              }
            },{
              xField: 'during_minute',
              fieldLabel: 'during_minute',
              displayName: '静态正在进行',                                           //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: 'FE9828'                                                 //正在进行，红色 下面进行大小控制 size:25
              }
            },{
              xField: 'finish_minute',
              fieldLabel: 'finish_minute',
              displayName: '静态已完工',                                             //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: '8DD5E7'                                                 //完成，蓝色
              }
            },{
              xField: 'end_minute',
              fieldLabel: 'end_minute',
              displayName: '无电状态',                                             //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: '7CFC00'                                                 //完成，蓝色
              }
            },{
              xField: 'foot_minute',
              displayName: ' ',                                                 //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: 'ffffffff'                                               //将第一组设为白色，与底色相同，产生透明效果（这个要写8个f，而不是传统的6个）
              }
            },{
              xField: 'dynamic_un_start_minute',
              fieldLabel: 'dynamic_un_start_minute',
              displayName: '动态计划任务',                                           //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: '663300'                                                 //计划任务，灰色
              }
            },{
              xField: 'dynamic_end_minute',
              fieldLabel: 'dynamic_end_minute',
              displayName: '有电状态',                                             //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: 'CD0000'                                                 //完成，蓝色
              }
            },{
              xField: 'dynamic_during_minute',
              fieldLabel: 'dynamic_during_minute',
              displayName: '动态正在进行',                                           //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: 'CC6633'                                                 //正在进行，红色 下面进行大小控制 size:25
              }
            },{
              xField: 'dynamic_finish_minute',
              fieldLabel: 'dynamic_finish_minute',
              displayName: '动态已完工',                                             //用于在tip上，显示名称，会被后面的tipRenderer覆盖
              style:{
                color: '006633'                                                 //完成，蓝色
              }
            }
          ],
          tipRenderer : function(chart, record){                               //进行渲染，可以对结果进行设置，此方法未收录在api中
            return '点击查看详情'
          },
          
          listeners: {
            itemclick: function(o){                                             //点击进度条，进行触发信息
              var rec = chartStore.getAt(o.index);                              //取得所有的传送信息
              var team = rec.get('team_name')
              var str =team +'<br />'+ rec.get('description');
              Ext.MessageBox.alert('工作小组', "<font size = 3>"+str+"</font>");             //取得小组名信息
            }
          }
        })

        var chartPanel = new Ext.Panel({
          items:[stackedBarChart]
        })

        searchChartForm.form.load({
          url: '/traintask/getStartTasks?trainTaskId=' + trainTaskId,
          waitMsg: '正在载入数据...',
          success: function(form, action){
          },
          failure: function(form, action){
            Ext.MessageBox.alert('提示信息', '信息加载失败');
          }
        });
        chartStore.load();                                                      //第一次进入窗体，加载store
        searchChartForm.render('searchChartForm');
        chartPanel.render('chartForm');
        interval = setInterval("chartStore.load()",15000)                       //每15秒钟重复进行一次store.load()操作
      });
    </script>
  </head>
  <body>
    <div id="searchChartForm"></div>
    <div id="chartForm"></div>
  </body>
</html>